<template>
	<view class="towstage" @touchmove.stop.prevent="moveHandle">
		<view class="search-container">
			<div class="search-container-left" style="display: flex;align-items: center;flex: 1;">
				<image style="width: 26rpx;height: 28rpx;" :src="$showImg('/static/new/dz.png')" mode="">
				</image>
				<view class="" style="display: flex;align-items: center;  margin: 0 0rpx 0 18rpx;">
					<text class="oneline" style="margin-right:6rpx ;">郑州•紫阳嘉园紫阳嘉园紫阳嘉园</text>
					<u-icon size="20rpx" bold top="2" name="arrow-down"></u-icon>
				</view>
			</div>
			<view class="searchText">
				<u-icon name="search" top="2rpx" size="20px" color="#7A7A7A"></u-icon>
				<input type="text" style="font-size: 28rpx;" placeholder="请输入关键词" />
			</view>
		</view>
		<!-- :class="['left',showHeader == false?'left_h5':'left_app']" -->
		<scroll-view :class="['left']" style="top: 92rpx" :scroll-y="true" scroll-with-animation
			:scroll-top="scrollTop">
			<view v-for="(item, index) in classList" :key="index"
				:class="'classTitle ' + (current == index ? 'actives':'')" @tap="setCurrent(item, index)"
				:style="{color:current == index ?colors:''}">
				<text>{{item.name}}</text>
				<view class="classactive" v-if="current == index" :style="'background-color:' + colors">
				</view>
			</view>
		</scroll-view>
		<!-- :class="['right',showHeader == false?'right_h5':'right_app']" -->
		<scroll-view :class="['right']" style="top: 92rpx" :scroll-y="true" :scroll-with-animation="true">
			<view class="goods_choose" style="align-items: center;padding-bottom: 16rpx;">
				<view class="goods_hot">
					热度
				</view>
				<view style="display: flex;align-items: center;margin-right: 20rpx;" @click="sortTap">
					<text style="font-size: 26rpx;margin-right: 10rpx;" :style="isRank?'color:#EC003D;':'color:#7B7B7B;'">排行</text>
					<view class="">
						<u-icon size="8px" :color="sortFlag?'#EC003D':'#7B7B7B'" name="arrow-up-fill"></u-icon>
						<u-icon top="" size="8px" :color="sortFlag==false?'#EC003D':'#7B7B7B'"
							name="arrow-down-fill"></u-icon>
					</view>
				</view>
			</view>
			<!-- <view class="goods-head">
				{{activeName}}
			</view> -->

			<view class="goods_list" v-if="dataList.length !== 0">
				<view v-for="(item, index) in dataList" @tap="jumpDetail(item)" :key="index" class="goods_item">
					<image :src="$wanlshop.oss(item.image)"></image>
					<text class="goods_text">{{item.title}}</text>
				</view>

			</view>

		</scroll-view>

	</view>
</template>

<script>
	const myMixin = ({
		methods: {
			setData: function(obj, callback) {
				let that = this;
				const handleData = (tepData, tepKey, afterKey) => {
					tepKey = tepKey.split('.');
					tepKey.forEach(item => {
						if (tepData[item] === null || tepData[item] === undefined) {
							let reg = /^[0-9]+$/;
							tepData[item] = reg.test(afterKey) ? [] : {};
							tepData = tepData[item];
						} else {
							tepData = tepData[item];
						}
					});
					return tepData;
				};
				const isFn = function(value) {
					return typeof value == 'function' || false;
				};
				Object.keys(obj).forEach(function(key) {
					let val = obj[key];
					key = key.replace(/\]/g, '').replace(/\[/g, '.');
					let front, after;
					let index_after = key.lastIndexOf('.');
					if (index_after != -1) {
						after = key.slice(index_after + 1);
						front = handleData(that, key.slice(0, index_after), after);
					} else {
						after = key;
						front = that;
					}
					if (front.$data && front.$data[after] === undefined) {
						Object.defineProperty(front, after, {
							get() {
								return front.$data[after];
							},
							set(newValue) {
								front.$data[after] = newValue;
								that.$forceUpdate();
							},
							enumerable: true,
							configurable: true
						});

						// #ifndef VUE3
						front[after] = val;
						// #endif

						// #ifdef VUE3
						Reflect.set(front, after, val);
						// #endif

					} else {


						// #ifndef VUE3
						that.$set(front, after, val);
						// #endif

						// #ifdef VUE3
						Reflect.set(front, after, val);
						// #endif
					}
				});
				isFn(callback) && this.$nextTick(callback);
			}
		}
	});

	export default {
		mixins: [myMixin],
		data() {
			return {
				sortFlag: null,
				isRank: false,
				scrollTop: 0,
				activeName: '服装店铺'

			};
		},


		props: {
			colors: {
				type: String
			},

			classList: {
				type: Array
			},
			dataList: {
				type: Array
			},
			current: {
				type: Number,
				default: 0
			},
			showHeader: { //用来控制在APP下样式
				type: Boolean,
				default: false
			},

		},
		methods: {
			sortTap(){
				this.sortFlag=!this.sortFlag,
				this.isRank = true
			},
			moveHandle() {},
			setCurrent(item, index) {
				//设置tab
				let scrollTop = index * 20;
				if (index <= 2) {
					scrollTop = 0;
				}
				console.log('item', item)
				this.setData({
					activeName: item.name,
					scrollTop: scrollTop,
				});
				this.$emit('cateClick', item, index)
			},



			jumpDetail(e) {

				this.$emit("itemClick", e);
			}

		}
	};
</script>
<style scoped lang="scss">
	@import "./publicType.scss";

	.search-container {
		width: 100%;
		height: 92rpx;
		background-color: white;
		display: flex;
		align-items: center;
		padding: 0 22rpx;

		.oneline {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			width: 200rpx;



		}

		.searchText {
			padding-left: 30rpx;
			width: 467rpx;
			height: 68rpx;
			background: #F2F2F2;
			border-radius: 24rpx;
			display: flex;
			align-items: center;
			margin-left: 17rpx;
		}
	}
</style>